<script setup lang="ts">
import { AnimeSummaryType } from '@/type/typedefine.ts'

defineProps({
  animeSummary: {
    type: Object as () => AnimeSummaryType,
    required: true,
  },
})
</script>

<template>
  <v-card elevation="0" class="card">
    <v-card-title class="displayflex">
      <text style="font-size: 35px; font-weight: 1000">
        {{ animeSummary.title }}-{{ animeSummary.subtitle }}
      </text>
      <text class="yearText">({{ animeSummary.year }})</text>
    </v-card-title>

    <v-card-title class="displayflex">
      <text class="subtitleText">
        {{ animeSummary.year }}-{{ animeSummary.month }}
      </text>
      <text>&nbsp;•&nbsp;</text>
      <text class="subtitleText">{{ animeSummary.subtitle }}</text>
      <text>&nbsp;•&nbsp;</text>
      <text class="subtitleText">{{ animeSummary.type }}</text>
    </v-card-title>

    <v-card-text class="displayflex">
      <v-row>
        <text class="summaryText">剧情简介</text>
        <div v-html="animeSummary.description" class="descriptionText"></div>
      </v-row>
    </v-card-text>
  </v-card>
</template>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.yearText {
  color: $yearcolor;
  font-size: 35px;
}
.subtitleText {
  color: white;
  font-size: 15px;
}
.card {
  user-select: none;
  background-color: transparent;
  max-width: 800px;
  padding-top: 35px;
  padding-left: 35px;
  padding-right: 35px;
  color: white;
}
.summaryText {
  font-size: 25px;
  font-weight: 1000;
}
.descriptionText {
  text-align: left;
  margin-top: 15px;
}
</style>
